import React , {memo} from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { ClearOutlined, CloseOutlined, HeartOutlined } from '@ant-design/icons'

import {SliderPlayListWrapper,SliderPlayListHeader,SliderPlaylistMain} from './style'
import PlaylistItem from './c-cpns/playlist-item'
import LyricContent from './c-cpns/lyric-content'
import {
  getSongDetailAction,
  changePlayStatusAction
} from '@/pages/player/store/actionCreator'

function SliderPlayList(props){

  const {isShowSlide , playlistCount ,closeWindow} = props

   // redux hook
   const dispatch = useDispatch()
   const { currentSong, playList, currentSongIndex } = useSelector(
     state => ({
       currentSong: state.getIn(['player', 'currentSong']),
       playList: state.getIn(['player', 'playList']),
       currentSongIndex: state.getIn(['player', 'currentSongIndex'])
     }),
     shallowEqual
   )

    // 点击item播放音乐
  const clickItem = (item) => {
    // 播放音乐 dispatch
    dispatch(getSongDetailAction(item.id))
    //加随机数产生状态变化
    dispatch(changePlayStatusAction(true + Math.random()))
  }
  


  return (
    <SliderPlayListWrapper 
      isShowSlide = {isShowSlide}
      onClick={e=> e.stopPropagation()}>
      <SliderPlayListHeader>
        <div className="playlist-header-left">
          <h3 className="header-title">播放列表({playlistCount})</h3>
          <div>
            <a
              href="/favorite"
              className="header-icon"
              onClick={e => e.preventDefault()}
            >
              <HeartOutlined />
              <span>收藏一下</span>
            </a>
            <a
              href="/clear"
              className="header-icon"
            >
              <ClearOutlined />
              <span>清除播放列表</span>
            </a>
          </div>
        </div>
        <div className="playlist-header-right">
          <div className="song-name">{currentSong.name}</div>
          <div className="close-window" onClick={closeWindow}>
            <CloseOutlined />
          </div>
        </div>
      </SliderPlayListHeader>
      <SliderPlaylistMain>
        <div className="main-playlist">
          {playList && playList.map((item,index)=>{
            return (
              <PlaylistItem
                key={item.id}
                isActive={(currentSongIndex?currentSongIndex:0) === index ? 'active' : ''}
                songName={item.name}
                singer={item.ar[0].name}
                duration={item.dt}
                songId={item.id}
                clickItem={() => clickItem(item)}>
              </PlaylistItem>
            )
          })}
        </div>
        <div></div>
        <LyricContent />
      </SliderPlaylistMain>
    </SliderPlayListWrapper>
  )
}

export default memo(SliderPlayList)